<template name="zCheckboxCreate">
	<view class="center-view">
		<view class="option-item">
			<text class="item-name">问题：</text>
			<input class="item-content theme-input" style="width:70%" v-model="que"/>
		</view>
		<view  v-for="(choice,index) in choices" :key="index" class="option-item">
			<text class="item-name">选项{{index + 1}}:</text>
			<input class="item-content theme-input" style="width:70%" v-model="choices[index]" :value="choice"/>
		</view>
		<view class="row-arrange">
			<view @click="addChoice" class="center-view" style="border:1upx dotted gray;margin-left:0upx;width:150upx;margin-top:10upx;">
				<image style="height:100upx;width:150upx;" src="/static/inc.svg"></image>
				<text class="little-font-size">增加选项</text>
			</view>
			<view class="center-view" style="border:1upx dotted gray;margin-left:100upx;width:150upx;margin-top:10upx;">
				<image @click="removeChoice" style="height:100upx;width:150upx;" src="/static/dec.svg"></image>
				<text class="little-font-size">减少选项</text>
			</view>
			<!-- <image style="height:100upx" src="../../static/dec.svg"></image> -->
		</view>
		<!-- <view class="row-arrange"><label>问题：</label><input style="background-color:blue;" v-model="que"/></view>
		<view  v-for="(choice,index) in choices" :key="index">
			<view class="row-arrange"><text>选项{{index + 1}}:</text><input v-model="choices[index]" :value="choice" style="background-color:blue" /></view>
		</view> -->
		<view class="option-item"><text class="item-name">最少选几项:</text><input style="width:100upx;text-align:right" class="item-content theme-input" type="number" v-model="checkBoxMinNum"/></view>
		<view class="option-item"><text class="item-name">最多选几项:</text><input style="width:100upx;text-align:right" class="item-content theme-input" type="number" v-model="checkBoxMaxNum"/></view>		
		<!-- <button @click="addChoice">增加选项</button> -->
	</view>
</template>
<script>
	export default {
		name : "zCheckboxCreate",
		data() {
			return {
				// input_height : ""
				// question : "问题"
				// 文本长度
				que : "",
				// 选项数组
				choices : [""],
				// 多选最多/少项目
				checkBoxMinNum : "",
				checkBoxMaxNum : ""
			};
		},
		props : {
		},
		created : function(e){
			
		},
		methods: {
			get : function(id){
				if(this.que == ''){
					uni.showModal({
						title : '错误',
						content : '问题不可为空',
						showCancel : false
					})
					return null;
				}
				var res = {}
				res['question'] = this.que;
				res['key'] = 'q' + id;
				res['type'] = 'zcheckbox';
				var answer = {};
				var minNum = this.checkBoxMinNum.length == 0? 0 : parseInt(this.checkBoxMinNum);
				var maxNum = this.checkBoxMaxNum.length == 0? this.choices.length : parseInt(this.checkBoxMaxNum);
				if(minNum > maxNum){
					uni.showModal({
						title : '错误',
						content : '选择项不合理',
						showCancel : false
					})
					return null;
				}
				answer['minNum'] = minNum;
				answer['maxNum'] = maxNum;
				answer['choices'] = this.choices;
				res['answer'] = answer;
				this.choices = [''];
				this.checkBoxMinNum = '';
				this.checkBoxMaxNum = '';
				return res;
			},
			addChoice : function(){
				this.choices.push("");
			},
			removeChoice : function(){
				this.choices.splice(this.choices.length-1,1);
			}
		}
	}
</script>

<style>
	@import "../../../common/zcss.css";
	@import "./creator.css";
</style>
